import React from 'react';
import { connect } from 'react-redux';
import { getHeaderData } from '../../actions/categoryAction';
import './Category.scss';
import { cloneDeep } from '../../../../utils/index'

class Category extends React.Component {
  constructor(props) {
    super(props);
  }
  
  fetchData() {
    this.props.dispatch(getHeaderData())
  }

  componentDidMount() {
    this.fetchData();
  }
  goCategory() {
    window.location.href = './category.html';
  }
  renderItems() {
    let items = this.props.items;
    let _items = cloneDeep(items);

    return _items.splice(0, 8).map((item, index) => {
      return (
        <div key={index} className="category-item" onClick={this.goCategory}>
          <img className="item-icon" src={item.url} />
          <p className="item-name">{item.name}</p>
        </div>
      )
    });
  }

  render() {
    return (
      <div className="category-content clearfix">{this.renderItems()}</div>
    );
  }
}
export default connect(
  state => ({
    items: state.categoryReducer.items
  })
)(Category);
